import * as maptalks from 'maptalks'

/**
 * 地图弹出信息框
 */
export function showInfo(e, map, info) {
  const code = info.split('---')[0]
  const name = info.split('---')[1]
  // 街道实时在线
  const options = getInfoWindow(name, code, 10, 20)
  const infoWindow = new maptalks.ui.InfoWindow(options)
  infoWindow.addTo(map).show(e.coordinate)
  // const dom = infoWindow.__uiDOM.childNodes[0].getElementsByClassName('info-title')[0]
  // dom.onclick = function(e) {
  //   console.log(e)
  // }
  return infoWindow
}

/**
 * 获取地图弹框
 */
function getInfoWindow(name, code, value1, value2) {
  return {
    'autoOpenOn': 'null', // set to null if not to open window when clicking on map
    'single': true,
    'custom': true,
    'dx': 0,
    'dy': 0,
    'content': '<div class="info-wrap">' +
        '<div class="info-title">' +
          '<div class="info-title-top" onclick="click()">' + '实时监控数据' + '</div>' +
          '<div class="info-title-bottom">' + '15:00' + '</div>' +
        '</div>' +
        '<div class="info-body">' +
          '<div class="info-left">' +
            '<div class="info-left-item">' +
              '<div class="info-left-title">' + '在线人数' + '</div>' +
              '<div class="info-left-value">' + value1 + '</div>' +
            '</div>' +
            '<div class="info-left-item">' +
              '<div class="info-left-title">' + '境外人数' + '</div>' +
              '<div class="info-left-value">' + value2 + '</div>' +
            '</div>' +
          '</div>' +
          '<div class="info-right">' +
            '<div class="info-right-top">' + name + '</div>' +
            '<div class="info-right-bottom">' + code + ' </div>' +
          '</div>' +
        '</div>' +
      '</div>'
  }
}
